<template>
  <!-- 冷链机器人 -->
  <div class="coldchainrobot">
    <!-- 头部 -->
    <div class="coldhead">
      <div class="coldheadleft">
        <div class="coldheadleftimg">
          <img
            src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/6/1667441321505shut001.jpeg"
            alt=""
            style="width: 206px; height: 146px; border-radius: 10px"
            v-if="is_open == '0'"
          />
          <img
            src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/6/1667441403997start001.gif"
            alt=""
            style="width: 206px; height: 146px; border-radius: 10px"
            v-if="is_open == '1'"
          />
        </div>
        <div>
          <h2 style="line-height: 64px">冷链盯控AI BOT</h2>
          <h4 style="line-height: 38px">24小时盯控运输过程</h4>
          <h4>预判未来温度,提前预知风险</h4>
        </div>
      </div>
      <div class="coldheadrigt">
        <el-button
          type="primary"
          size="medium"
          v-if="is_open == '0'"
          @click="opencold(1)"
          v-permission="'intelligent_timing_task'"
          data-tracker="P47-1"
          >开启</el-button
        >
        <el-button
          type="danger"
          size="medium"
          v-if="is_open == '1'"
          @click="opencold(0)"
          v-permission="'intelligent_timing_task'"
          data-tracker="P47-2"
          >关闭</el-button
        >
      </div>
    </div>
    <!-- 中间 -->
    <div class="coldcenter">
      <div class="coldcenterspan">
        监控运单<span style="color: #67c23a">{{ total }}</span
        >个,报警处理运单<span style="color: red">{{ warning_count }}</span
        >个
      </div>
      <div class="coldcenterpage">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 表格 -->
    <div class="coldtable">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :max-height="maxheight"
      >
        <el-table-column fixed prop="waybill_no" label="运单号" width="180">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.waybill_no.split(',')"
              style="cursor: pointer; color: blue"
              @click="handleJump(scope, index)"
              :key="index"
            >
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="incubator_type" label="箱号" width="120">
          <template slot-scope="scope">
            {{
              scope.row.incubator_type == "1"
                ? "保温箱(4L)"
                : scope.row.incubator_type == "2"
                ? "保温箱(16L)"
                : scope.row.incubator_type == "3"
                ? "保温箱(23L)"
                : scope.row.incubator_type == "4"
                ? "保温箱(60L)"
                : scope.row.incubator_type == "5"
                ? "保温箱(61L)"
                : scope.row.incubator_type == "6"
                ? "保温箱(102L)"
                : scope.row.incubator_type == "7"
                ? "保温箱(124L)"
                : scope.row.incubator_type == "8"
                ? "保温箱(125L)"
                : scope.row.incubator_type == "9"
                ? "干冰箱"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="customer" label="客户" width="180">
        </el-table-column>
        <el-table-column prop="provenance" label="始发地" width="180">
        </el-table-column>
        <el-table-column prop="destination" label="目的地" width="180">
        </el-table-column>
        <el-table-column prop="thermosphere" label="温层" width="180">
          <template slot-scope="scope">
            {{
              scope.row.thermosphere == "0"
                ? "常温（0~30℃）"
                : scope.row.thermosphere == "1"
                ? "冷藏（2~8℃）"
                : scope.row.thermosphere == "2"
                ? "冷冻（-15~-25℃）"
                : scope.row.thermosphere == "3"
                ? "阴凉（15~25℃）"
                : scope.row.thermosphere == "4"
                ? "干冰（-60~-90℃）"
                : scope.row.thermosphere == "6"
                ? "冷冻（-25℃以下）"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="出发时间" width="180">
          <template slot-scope="scope">
            <span v-time="scope.row.start_time"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="estimated_time_of_arrival"
          label="预计到达时间"
          width="180"
        >
          <template slot-scope="scope">
            <span v-time="scope.row.estimated_time_of_arrival"></span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
          v-if="isHavePermission('intelligent_warning_waybill_info')"
        >
          <template slot-scope="scope">
            <el-button
              data-tracker="P47-3"
              v-permission="'intelligent_warning_waybill_info'"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              >点击查看状态</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="查看状态"
      :close-on-click-modal="false"
      :visible.sync="outerVisible"
    >
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="100px"
        class="demo-form-inline"
      >
        <el-form-item label="运单号:" style="width: 280px">
          {{ form.waybill_no }}
        </el-form-item>
        <el-form-item label="箱号:" style="width: 280px">
          <span>{{
            form.incubator_type == "1"
              ? "保温箱(4L)"
              : form.incubator_type == "2"
              ? "保温箱(16L)"
              : form.incubator_type == "3"
              ? "保温箱(23L)"
              : form.incubator_type == "4"
              ? "保温箱(60L)"
              : form.incubator_type == "5"
              ? "保温箱(61L)"
              : form.incubator_type == "6"
              ? "保温箱(102L)"
              : form.incubator_type == "7"
              ? "保温箱(124L)"
              : form.incubator_type == "8"
              ? "保温箱(125L)"
              : form.incubator_type == "9"
              ? "干冰箱"
              : ""
          }}</span>
          <!-- <span>{{form.incubator_type}}</span> -->
        </el-form-item>
        <el-form-item label="客户:" style="width: 280px">
          <span>{{ form.customer }}</span>
          <!-- <el-input v-model="form.customer"></el-input> -->
        </el-form-item>
        <el-form-item label="始发地:" style="width: 280px">
          <span>{{ form.customer }}</span>
          <!-- <el-input v-model="form.customer"></el-input> -->
        </el-form-item>
        <el-form-item label="目的地:" style="width: 280px">
          <span>{{ form.destination }}</span>
          <!-- <el-input v-model="form.destination"></el-input> -->
        </el-form-item>
        <el-form-item label="温层:" style="width: 280px">
          <!-- <el-input v-model="form.thermosphere">
          </el-input> -->
          <span>{{
            form.thermosphere == "0"
              ? "常温（0~30℃）"
              : form.thermosphere == "1"
              ? "冷藏（2~8℃）"
              : form.thermosphere == "2"
              ? "冷冻（-15~-25℃）"
              : form.thermosphere == "3"
              ? "阴凉（15~25℃）"
              : form.thermosphere == "4"
              ? "干冰（-60~-90℃）"
              : form.thermosphere == "6"
              ? "冷冻（-25℃以下）"
              : ""
          }}</span>
        </el-form-item>
        <el-form-item label="出发时间:" style="width: 285px">
          <el-input v-time="form.start_time" style="font-size: 14px"></el-input>
        </el-form-item>
        <el-form-item label="预计到达时间:" style="width: 285px">
          <el-input
            v-time="form.estimated_time_of_arrival"
            style="font-size: 14px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div v-for="(itme, index) in informList" :key="index">
        <span style="font-weight: bold">{{ index + 1 }}. 报警处理内容</span>
        <div style="padding: 10px 10px 15px 10px">
          <div class="temperature" v-if="itme.warning_type == '1'">
            <div class="temperaturestext">
              <span v-time="itme.warning_time" style="color: red"></span>
              <span>有温度异常,电话通知</span>
              <span style="color: red">{{ itme.warning_mobile }}。</span>
            </div>
            <!-- outerVisible 通过页面开启进行播放如果关闭了停止播放 -->
            <audio
              controls
              height="50"
              width="100"
              style="width: 276px; height: 31px"
              v-if="outerVisible == true"
            >
              <source :src="itme.telephone_recording_path" type="audio/mpeg" />
              <source :src="itme.telephone_recording_path" type="audio/ogg" />
              <embed
                height="50"
                width="100"
                :src="itme.telephone_recording_path"
              />
            </audio>
          </div>
          <div
            class="temperature"
            style="margin-top: 10px"
            v-if="itme.warning_type == '2'"
          >
            <div class="temperaturestext">
              <span v-time="itme.warning_time" style="color: red"></span>
              <span>有超温预警,短信通知</span>
              <span style="color: red">{{ itme.warning_mobile }}。</span>
            </div>
            <el-button
              type="primary"
              plain
              @click="openginner(itme.warning_text)"
              >点击查看短信</el-button
            >
          </div>
        </div>
      </div>
      <el-dialog
        width="30%"
        :close-on-click-modal="false"
        title="短信通知内容"
        :visible.sync="innerVisible"
        append-to-body
      >
        <span style="font-weight: bold; font-size: 15px">通知内容：</span>
        <span>{{ warning_value }}</span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script >
import {
  InRoadWaybill, //列表接口
  TimingTask, //开关接口
  WarningWaybillInfo, //
} from "@/api/earlywarning";
import { isHavePermission } from "@/utils/mUtils";

export default {
  data() {
    return {
      maxheight: "auto",
      is_open: "", // 1开启，0关闭
      warning_count: "0", //报警处理了多少
      total: "0", //监控了多少个
      tableData: [
        // {
        //   waybill_id: "", //运单号id
        //   waybill_no: "", //运单号
        //   customer: "", //客户
        //   destination: "", //目的地
        //   estimated_time_of_arrival: "", //预计到达时间
        //   incubator_type: "", //保温箱型号
        //   provenance: "", //始发地
        //   start_time: "", //出发时间
        //   thermosphere: "", //温层
        // },
      ],
      form: {
        waybill_id: "", //运单号id
        waybill_no: "", //运单号
        customer: "", //客户
        destination: "", //目的地
        estimated_time_of_arrival: "", //预计到达时间
        incubator_type: "", //保温箱型号
        provenance: "", //始发地
        start_time: "", //出发时间
        thermosphere: "", //温层
      },
      // 分页功能
      pagination: {
        current_page: 1, //当前页数
        per_page_count: 10, //一页多少条
        total: 0, //总共多少条
      },
      currentPage4: 1, //当前页数
      // 预警的通知方式
      inform: {
        telephone_recording_path: "", //音频地址
        warning_mobile: "", //电话
        warning_text: "", //短信内容
        warning_time: "", //时间
      },
      informList: [],
      warning_value: "", //短信内容
      outerVisible: false,
      innerVisible: false,
    };
  },
  mounted() {
    this.pageInRoadWaybill();
    this.pagedictionanryList(); //数据字典
  },
  methods: {
    pagedictionanryList() {},
    isHavePermission(val) {
      return isHavePermission(val);
    },
    handleJump(scope, index) {
      const id = scope.row.waybill_id;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
    openginner(value) {
      this.warning_value = value;
      this.innerVisible = true;
    },
    handleClick(e) {
      var param = {
        waybill_id: e.waybill_id,
      };
      WarningWaybillInfo(param).then((res) => {
        if (res.code == "10000") {
          this.form = { ...e };
          var res = res.data;
          this.informList = res;
          this.outerVisible = true;
        }
      });
    },
    pageInRoadWaybill() {
      var param = {
        page: this.pagination.current_page,
        page_size: this.pagination.per_page_count,
      };
      InRoadWaybill(param).then((res) => {
        var res = res.data;
        if (res != null) {
          if (res.is_open == "1") {
            // 列表数据
            this.tableData = res.list;
            if (this.tableData.length > 5) {
              //两排操作栏
              this.maxheight = document.documentElement.clientHeight - 295;
            } else {
              this.maxheight = "auto";
            }

            // 页数数据
            this.pagination.total = res.pagination.total;
            // 监控了多少,处理了多少
            this.total = res.total;
            this.warning_count = res.warning_count;
          }
          // 是否开启
          this.is_open = res.is_open;
        }
      });
    },
    handleSizeChange(val) {
      // 每页多少条
      if (this.is_open == "1") {
        this.pagination.per_page_count = val;
        this.pageInRoadWaybill();
      } else {
      }
    },
    handleCurrentChange(val) {
      // 当前的页数
      if (this.is_open == "1") {
        this.pagination.current_page = val;
        this.pageInRoadWaybill();
      } else {
      }
    },
    // 开关接口
    opencold(value) {
      var parem = {
        is_open: value + "", // 1开启，0关闭
        interval_time: "5", //间隔时长，默认1分钟
      };
      TimingTask(parem).then((res) => {
        if (res.code == "10000") {
          var res = res.data;
          if (res != null) {
            this.is_open = res.is_open;
            if (res.is_open == "1") {
              this.pageInRoadWaybill();
            } else {
              // 列表数据
              this.tableData = [];
              // 页数数据
              this.pagination.total = 0;
              // 监控了多少,处理了多少
              this.total = 0;
              this.warning_count = 0;
            }
          }
        } else {
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.coldchainrobot {
  padding: 10px 15px;
  background-color: #fff;
  .coldhead {
    height: 150px;
    width: 100%;
    // background: beige;
    display: flex;
    justify-content: space-between;
    .coldheadleft {
      min-width: 385px;
      // background: red;
      display: flex;
      justify-content: space-between;
      .coldheadleftimg {
        // background: black;
        width: 212px;
      }
    }
    .coldheadrigt {
      width: 14%;
      // background: blue;
      line-height: 150px;
    }
  }
  // 中间
  .coldcenter {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    .coldcenterspan {
      line-height: 50px;
      font-weight: bold;
    }
    .coldcenterpage {
      margin-top: 10px;
    }
  }
  /deep/.el-form-item__label {
    // color: #f56c6c;
    font-weight: bold;
    // font-size: 20px;
  }
  .temperature {
    height: 31px;
    width: 100%;
    display: flex;
    .temperaturestext {
      line-height: 34px;
      margin-right: 14px;
    }
  }
}
</style>